
<template>
  <div style="display: flex" class="tempxyz menmuStyle">
    <CCard class="rightCard">
      <CCardHeader class="header-wraper">
        <div class="header-left-titleWraper">
       
          <span class="textTitle">节点监控</span>
        </div>
        <div class="header-right-wraper">
          <Input
            v-model="nodeValue"
            placeholder="请输入关键字"
            style="width: 200px"
            class="headerMar"
          />
          <Button
            type="primary"
            @click="addMapUrl"
            class="system-btn-style headerMar"
            style="margin-right: 10px"
          >
            <Icon type="ios-search" />&nbsp;查询
          </Button>
        </div>
      </CCardHeader>
      <CCardBody class="card-body">
        <div style="height: calc(100% - 46px)">
          <TableList ref="table" :getColumn="getColumns" :getAxios="getAxios">
            <template v-slot:nodeStatus="item">
              <!-- {{ item.data.row.status == "0" ? "运行中" : "已禁用" }} -->
              <div v-if="item.data.row.nodeStatus == 'Running' " style="color:blue">运行中</div>
              <div v-else style="color:red">离线</div>
              <!-- <div >运行中</div> -->
            </template>
            <template v-slot:show_details="item">
              <CButton
                title="查看资源"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                style="width:65px"
                @click="look(item.data.row)"
                >资源</CButton
              >
              <CButton
                title="查看POD"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                style="width:65px"
                @click="lookPOD(item.data.row)"
                >POD</CButton
              >
            </template>
            <template v-slot:status="item">
              <div v-if="item.data.row.status == '0' " style="color:blue">开启</div>
              <div v-else style="color:red">禁用</div>
                <!-- <i-switch
                  size="large"
                  v-model="item.data.row.status"
                  :before-change="beforeChange"
                  :true-value="0"
                  :false-value="1"
                  @on-change="changedStatus(data, item.data.row)"
                >
                  <span slot="open">开启</span>
                  <span slot="close">禁用</span>
                </i-switch> -->
              </template>
          </TableList>
        </div>
      </CCardBody>
    </CCard>
  </div>
</template>

<script>
import TableList from "@/template/table/TableList";

export default {
  name: "nodesMonitor",
  components: { TableList },
  data() {
    return {
      nodeValue:'',
      getColumns: [
        {
          title: "主机名",
          key: "nodeName",
          width: "180",
          align: "center",
        },
        {
          title: "别名",
          key: "name",
          align: "center",
        },
        {
          title: "ip地址",
          key: "ipAddress",
          width: "180",
          align: "center",
        },
        {
          title: "操作系统",
          key: "operateSystem",
          align: "center",
        },
        // {
        //   title: "包含系统",
        //   key: "userName",
        //   align: "center",
        //   maxWidth: "200",
        // },
       
        // {
        //   title: "CPU核数(个)",
        //   key: "cpuCores",
        //   width: "110",
        //   align: "center",
        // },
        {
          title: "CPU使用率(%)",
          key: "cpuUsage",
          width: "110",
          align: "center",
        },
        //  {
        //   title: "内存(GiB)",
        //   key: "memoryTotal",
        //   width: "110",
        //   align: "center",
        // },
        {
          title: "内存使用率(%)",
          key: "memoryUsage",
          width: "110",
          align: "center",
        },
        {
          title: "存储使用(%)",
          key: "diskUsage",
          align: "center",
        },
         {
          title: "POD数量",
          key: "podNum",
          align: "center",
        },
        {
          key: "nodeStatus",
          slot: "nodeStatus",
          title: "运行状态",
          align: "center",
        },
        {
          key: "status",
          slot: "status",
          title: "计算状态",
          align: "center",
          width: "120",
        },
        {
          key: "show_details",
          slot: "show_details",
          title: "操作",
          align: "center",
          width: "220",
        },
      ],
      getAxios: {
        url: this.$api.monitorApi.clusterNode, //请求路径
        method: "get", //请求方式
        dataList: {}, //请求参数
      },
    };
  },
  mounted() {
    //   this.getImageControlTree();
  },
  methods: {
 
    selectionChange(data) {
      // 选中的数据
    },
      addMapUrl(){
         let self = this;
      let path = this.$api.monitorApi.clusterNode;
      let param = {
        pageNum: 0,
        pageSize: 0,
       
        name: this.nodeValue,
      };
      let getAxiosData = {
        method: "get",
        url: path,
      };
      this.$refs.table.getRefreshTable(param, getAxiosData);
      return;

      },
    look(row) {
      let NodeNameAlias = `${row.nodeName}(${row.nodeAlias})`;

      if (row.nodeStatus === "Running") {
        this.$router.push({
          path: "/monitor/statusMonitor/nodesMonitorDetail",
          query: {
            nodeName: row.nodeName,
            nodeId: row.id,
            nodesMonitorBusinessName: row.businessName,
          },
        });
      } else {
        this.$Message.error("已离线 状态下暂无详情");
      }
    },

    lookPOD(row) {
      this.$router.push({
        path:'/monitor/statusMonitor/podMonitorDetail',
        query: {
          nodeName: row.nodeName,
          // nodeId: row.id,
          // nodesMonitorBusinessName: row.businessName,
        },
      });
      
    },
  },
};
</script>

<style scoped>
.rightCard {
  width: 80%;
  flex: 1;
}

.leftCard {
  width: 18%;
}
/deep/.card {
  margin-bottom: 0;
}
.headerMar {
  margin-left: 10px;
}
</style>

